<template>
  <div>
    <h1>管理员学生列表管理界面</h1>
    <div class="app-container">

      <el-button @click="AddStudent()"> 添加学生 </el-button>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="学院" width="95">
          <template slot-scope="scope">
            {{ scope.row.college }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="学生学号" width="95">
          <template slot-scope="scope">
            {{ scope.row.s_id }}
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="密码" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.password }}</span>
          </template>
        </el-table-column>
        <el-table-column label="专业" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.major }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年级" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.grade }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="ChangeStudent(scope.$index)"> 修改信息 </el-button>
            <el-button @click="DelStudent(scope.row.s_id)"> 删除学生 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="addShow">
      <el-form :model="studentDetail">
        <el-form-item label="学院">
          <el-input v-model="studentDetail.s_college" placeholder="请输入学院名称" />
        </el-form-item>
        <el-form-item label="学生学号">
          <el-input v-model="studentDetail.s_id" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="studentDetail.s_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="studentDetail.password" placeholder="默认密码" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="studentDetail.s_major" placeholder="选择专业" />
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="studentDetail.s_grade" placeholder="选择年级" />
        </el-form-item>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleAdd">提交</el-button>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="delShow">
      <el-form>
        <h1>是否确认删除该学生！</h1>
        <el-button @click="handleDel">确认</el-button>
        <el-button @click="backDel">取消</el-button>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="changeShow">
      <el-form :model="studentDetail">
        <el-form-item label="学院">
          <el-input v-model="studentDetail.s_college" />
        </el-form-item>
        <el-form-item label="学生学号">
          <el-input v-model="studentDetail.s_id" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="studentDetail.s_name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="studentDetail.password" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="studentDetail.s_major" />
        </el-form-item>
        <el-form-item label="年级">
          <el-input v-model="studentDetail.s_grade" />
        </el-form-item>
        <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="handleChange">提交</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getStudents } from '@/api/students'
import { adminChangeStudent } from '@/api/students'
import { adminDelStudent } from '@/api/students'
import { adminAddStudent } from '@/api/students'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      studentDetail: {
        s_id: '',
        s_name: '',
        s_gender: '',
        s_major: '',
        password: '123456',
        s_college: ''
      },
      student_clean: {
        s_id: '',
        s_name: '',
        s_gender: '',
        s_major: '',
        password: '',
        s_college: ''
      },
      click: {
        s_id: ''
      },
      delShow: false,
      addShow: false,
      changeShow: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getStudents().then(response => {
        console.log(response)
        this.list = response.students
        this.listLoading = false
        console.log(this.list)
      })
    },
    DelStudent(id) {
      this.delShow = true
      this.click.s_id = id
      console.log(id)
    },
    handleDel() {
      adminDelStudent(this.click).then(response => {
        if (response.code == 200) {
          this.delShow = false
          this.fetchData()
        } else {
          console.log('出现错误')
        }
        this.click.s_id = ''
      })
    },
    backDel() {
      this.delShow = false
      this.click.s_id = ''
    },
    ChangeStudent(index) {
      this.studentDetail = this.student_clean
      this.click.s_id = this.list[index].s_id
      this.studentDetail.s_id = this.list[index].s_id
      this.studentDetail.s_name = this.list[index].name
      this.studentDetail.password = this.list[index].password
      this.studentDetail.s_major = this.list[index].major
      this.studentDetail.s_grade = this.list[index].grade
      this.studentDetail.s_college = this.list[index].college
      this.changeShow = true
    },
    handleChange() {
      console.log(this.studentDetail)
      adminChangeStudent(this.studentDetail).then(response => {
        if (response.code == 200) {
          this.fetchData()
        } else {
          console.log('出现问题')
        }
      })
      this.studentDetail = this.student_clean
      this.click.s_id = ''
      this.changeShow = false
    },
    AddStudent() {
      this.studentDetail = {
        s_id: '',
        s_name: '',
        s_gender: '',
        s_major: '',
        password: '123456',
        s_college: ''
      }
      this.addShow = true
      console.log(this.$store.getters.id)
    },
    handleAdd() {
      console.log(this.studentDetail)
      adminAddStudent(this.studentDetail).then(response => {
        if (response.code == 200) {
          this.fetchData()
        } else {
          console.log('出现问题')
        }
      })
      this.studentDetail = this.student_clean
      this.addShow = false
    }
  }
}
</script>
